<template>
  <div class="attention">
    <!--S顶部-->
    <roof title="我的关注"></roof>
    <!--E顶部-->

    <!--S导航标签-->
    <div id="tag" :style="{top:systemInfo.statusBarHeight + capsule_height + 'px'}">
      <div class="tag">
        <div
          v-for="(item,index) in tab_tags"
          class="text"
          :class="tab_tags_index === index ? 'active' : ''"
          :key="index"
          @click="clickTag(index)">
          {{item.text}}
        </div>
        <div class="sign"><div :class="'div_'+tab_tags_index"></div></div>
      </div>
    </div>
    <!--E导航标签-->

    <!--S内容-->
    <div id="content" :style="{'padding-top':content_padding_top+'px'}">

      <!--Stag选项卡-->
      <swiper
        class="items"
        :current="tab_tags_index"
        :duration="200"
        @change="tagsChange"
      >
        <!--S列表-->
        <swiper-item
          v-for="(item,index) in tab_tags"
          :key="index"
          class="item-content">

          <!--S关注的门店-->
          <scroll-view
            v-if="item.value === 'stall'"
            @scroll="contentScroll"
            class="scroll"
            :scroll-y="true"
            :scroll-with-animation="true"
            :scroll-top="scroll_top"
          >
            <div class="list">
              <stall-list
                :open_long_click="true"
                :sheet_index="sheet.stall_index"
                @long-click="longClick">
              </stall-list>
            </div>
          </scroll-view>
          <!--E关注的门店-->


          <!--S关注的用户-->
          <scroll-view
            v-if="item.value === 'user'"
            class="scroll"
            :scroll-y="true"
            :scroll-with-animation="true"
            @scroll="contentScroll"
            :scroll-top="scroll_top"
          >
            <user-list
              :open_long_click="true"
              :sheet_index="sheet.user_index"
              @long-click="longClick"
            ></user-list>
<!--            <empty>您还没有关注的用户哦~</empty>-->
          </scroll-view>
          <!--E关注的用户-->


        </swiper-item>
        <!--E列表-->

      </swiper>
      <!--Etag选项卡-->

    </div>
    <!--E内容-->

    <!--S上拉菜单-->
    <action-sheet
      @select="selectSheet"
      @cancel="sheet.show = false"
      :show="sheet.show"
      :options="sheet.options">
    </action-sheet>
    <!--S上拉菜单-->

    <!--S返回顶部按钮-->
    <div
      id="go-top"
      v-show="show_go_top"
      @click="clickGoTop"
    >
      <i class="iconfont icon-huidingbu"></i>
    </div>
    <!--E返回顶部按钮-->

    <!--S底部导航-->
    <i-tabbar value="attention"></i-tabbar>
    <!--E底部导航-->
  </div>
</template>

<script>
  import roof from '../../components/roof/Roof'
  import iTabbar from '../../components/itabbar/ITabbar'
  import stallList from '../../components/stall-list/StallList'
  import userList from '../../components/user-list/UserList'
  import empty from '../../components/empty/Empty'
  import actionSheet from '../../components/action-sheet/ActionSheet'
  import store from '../../store'
  import {select} from '../../utils'
  export default {
    data () {
      return {
        // 胶囊区域高度
        capsule_height: 0,
        // 顶部填充区域高度
        content_padding_top: 0,
        // 是否显示返回顶部按钮
        show_go_top: false,
        // 滚动条位置
        scroll_top: null,
        // 标签tags
        tab_tags: [
          {value: 'stall', text: '摊位'},
          {value: 'user', text: '用户'}
        ],
        // 标签当前下标
        tab_tags_index: 0,
        // 上拉菜单
        sheet: {
          show: false,
          options: [],
          stall_index: -1,
          user_index: -1
        }
      }
    },
    components: {
      roof,
      empty,
      'i-tabbar': iTabbar,
      'stall-list': stallList,
      'user-list': userList,
      'action-sheet': actionSheet
    },
    computed: {
      // 设备信息
      systemInfo () {
        return store.state.systemInfo
      },
      // 胶囊位置信息
      capsulePosition () {
        return store.state.capsule
      }
    },
    mounted () {
      this.setCapsuleHeight()
      this.setContentPaddingTop()
    },
    methods: {
      // Run
      /**
       * 设置胶囊的高度
       */
      setCapsuleHeight () {
        this.capsule_height = this.capsulePosition.height + ((this.capsulePosition.top - this.systemInfo.statusBarHeight) * 2)
      },
      /**
       * 设置内容区域的padding-top
       */
      setContentPaddingTop () {
        select('#tag')
          .then((res) => {
            this.content_padding_top = this.systemInfo.statusBarHeight + this.capsule_height + res[0].height
          })
      },
      /**
       * 页面滚动
       */
      contentScroll (ev) {
        if (ev.target.scrollTop >= 1500) {
          if (!this.show_go_top) this.show_go_top = true
        } else {
          if (this.show_go_top) this.show_go_top = false
        }
      },

      // Handle
      /**
       *点击标签按钮
       */
      clickTag (index) {
        this.tab_tags_index = index
      },
      /**
       * 选项卡切换
       */
      tagsChange (ev) {
        this.show_go_top = false
        this.tab_tags_index = ev.mp.detail.current
      },
      /**
       * 门店摊位列表长按事件
       */
      longClick (options) {
        this.sheet.options = options
        this.sheet.show = true
      },
      /**
       *选择上拉菜单事件
       */
      selectSheet (index) {
        if (this.tab_tags[this.tab_tags_index].value === 'stall') {
          this.sheet.stall_index = index
          setTimeout(() => {
            this.sheet.stall_index = -1
          }, 100)
        } else {
          this.sheet.user_index = index
          setTimeout(() => {
            this.sheet.user_index = -1
          }, 100)
        }
      },

      // Handel
      /**
       * 点击返回顶部
       */
      clickGoTop () {
        this.scroll_top = 0
        setTimeout(() => {
          this.scroll_top = null
        }, 100)
      }
    }
  }
</script>

<style scoped lang="less" src="./index.less"></style>
